import React, { Component } from 'react';
import {Map, Marker, MarkerList , NavigationControl, InfoWindow} from 'react-bmap'
import { SegmentedControl, WingBlank } from 'antd-mobile';

import styles from './maplist.css'

import fetchUtil from "../utils/fetchUtil";

import {getEquipArea,getEquipsByArea} from './actions'

class MapList extends Component {

    constructor(props){
        super(props);
        this.state = {
            areas:[],
            currentArea:{},
        }
    }

    componentDidMount(){

        const data = {
            apilist:'openLocation',
            url:'http://jyx.7chejian.com'
        }
        fetchUtil.post('/getJsConfig',data)
            .then((rs) => {
                if (rs.success){
                    window.wx.config(rs.data);
                } else {
                       
                }
            }, e => {
             
            });

        getEquipArea(1).then((data) => {
            this.setState({
                areas:data,
                currentArea:data[0],
                equipNum:0,
                inuse:0,
                nouse:0,
                showMap:true,
            })
        })

    }

    onClick = (item) => {
        getEquipsByArea(item.id).then((data) =>{
            console.log(data);

            let inuse = 0;
            let nouse = 0;

            for(let equip of data){
                inuse
                if (equip.state == 1){
                    inuse = inuse + 1;
                }else if (equip.state == 0){
                    nouse = nouse + 1;
                }
            }

            this.setState({
                showMap:true,
                currentArea:item,
                equipNum:data.length,
                inuse:inuse,
                nouse:nouse,
            })
        })
    }

    onChange = (e) => {
        if (e.nativeEvent.selectedSegmentIndex == 0){
            this.setState({
                showMap:true
            })
        }else{
            this.setState({
                showMap:false
            })
        }
      }

    naviToMap = (item) => {
        window.wx.openLocation({
            latitude: parseFloat(item.lat) , // 纬度，浮点数，范围为90 ~ -90
            longitude: parseFloat(item.lng), // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: '', // 地址详情说明
            scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }  

      renderList = () => {
        let height =  document.documentElement.clientHeight - 40;
        let areas = this.state.areas.map((item) => {
            return <div onClick={() => this.onClick(item)} key={item.id} className={styles.bottomDiv}>
                <img className={styles.img} src={item.img} />
                <div className={styles.contentC}>
                    <div style={{fontSize:16}}>
                        <div>
                        {item.name}
                        </div>
                        <div style={{fontSize:14,marginTop:5,color:'gray'}}>
                        {item.address}
                        </div>
                    </div>
                </div>
        </div>
        });
        return <div style={{marginTop:40,height:height,overflow:'auto'}}>
            {areas}
        </div>
    }

    render(){

        let hasEquip = false;

        let carea = undefined;

        if (this.state.currentArea != undefined){
            hasEquip = true;
            carea = this.state.currentArea;
        }

        let height =  document.documentElement.clientHeight - 120;

        var myIcon = new window.BMap.Icon(require('../image/wash.png'), new window.BMap.Size(300,157));

        return (<div className ={styles.container}>
            {this.state.showMap?
            <div>
            <div className ={styles.map}>
            <Map style={{height: height}}  center={{lng: carea.lng, lat: carea.lat}} zoom="16">
            {
                this.state.areas.map((item) => {
                    const self = this;
                    return <Marker 
                            key={item.id}
                            icon={myIcon}
                            events={{
                                click: () => {
                                    this.onClick(item);
                                }
                            }}
                            position={{lng: item.lng, lat: item.lat}} 
                            enableClicking={true}/>
                    })
            }
            <NavigationControl />
            </Map>
        </div>
        {
            hasEquip?
            <div className={styles.bottomDiv}>
                    <img className={styles.img} src={carea.img} />
                    <div className={styles.contentC}>
                        <div style={{fontSize:16}}>
                            <div>
                            {carea.name}
                            </div>
                            <div style={{fontSize:14,marginTop:5,color:'gray'}}>
                            {carea.address}
                            </div>
                        </div>

                        <div style={{fontSize:14,color:'gray'}}>
                        <span>设备数：{this.state.equipNum}</span>
                        <span style={{marginLeft:10}}>工作中：{this.state.inuse}</span>
                        <span style={{marginLeft:10}}>空闲：{this.state.nouse}</span>

                        <span onClick={() => {this.naviToMap(carea)}} className={styles.button}>
                            导航
                        </span>
                        </div>
                    </div>
            </div>:
            null
        }
            </div>
            :this.renderList()
            }
            
            <div className={styles.dealdiv}>
                    <SegmentedControl
                    values={['地图', '列表']}
                    onChange={this.onChange}
                    style={{ height: '35px', width: '250px' }}
                    onValueChange={this.onValueChange}
                    />
            </div>
        </div>
        )
    }
   
}


export default MapList;

